{extend name="common:base" /}

{block name="title"}个人中心 - 天佑二手货{/block}
{block name="css"}
    <link rel="stylesheet" href="__STATIC__/css/cropper.min.css" />
{/block}
{block name="page"}auth{/block}

{block name="header"}
<header>
    <hr />
</header>
{/block}

{block name="main"}
<div class="am-container">
    <div class="am-u-lg-3 am-u-md-3">
        <div class="am-u-lg-12 am-u-md-12">
            <img class="am-center" src="{$userinfo['image']}" width="150" height="150"/>
            <span class="am-center am-text-center" style="margin-top:2px;">
                <a href="#" class="am-text-center" data-am-modal="{target: '#image-popup'}">修改</a>
            </span>
        </div>
        <div class="am-u-lg-12 am-u-md-12">
        </div>
    </div>
    <div class="am-u-lg-9 am-u-md-9">
        <div data-am-widget="tabs" class="am-tabs am-tabs-default am-margin-0">
            <ul class="am-tabs-nav am-cf">
                <li class="am-active am-block"><a href="[data-tab-panel-0]">基本资料</a></li>
                <li class="am-block"><a href="[data-tab-panel-1]">收获地址</a></li>
                <li class="am-block"><a href="[data-tab-panel-2]">安全设置</a></li>
            </ul>
            <div class="am-tabs-bd">
                <div data-tab-panel-0 class="am-tab-panel am-active">
                    <ul class="">
                        <li><span>用户名：</span><span>{$userinfo['username']}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span><a href="#" class="" id="btn-modify-username">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;注：昵称每6个月可修改一次</span></li>
                        <li><span>邮箱：</span><span>{$userinfo['email']}</span></li>
                        <li><span>校区：</span><span>{$userinfo['area']}</span></li>
                        <li><span>信息保护级别：</span><span>{$userinfo['protect']}</span></li>
                    </ul>
                </div>
                <div data-tab-panel-1 class="am-tab-panel ">
                  【彩虹】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
                </div>
                <div data-tab-panel-2 class="am-tab-panel ">
                    <ul class="">
                        <li><a href="#">修改密码</a></li>
                        <li><a href="#">实名认证</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
<!-- div内均为隐藏内容 -->
<div class="am-modal am-modal-prompt" tabindex="-1" id="name-prompt">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">修改昵称</div>
    <div class="am-modal-bd">
      <input type="text" class="am-modal-prompt-input" id="new-newname">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" id="btn-modify-username" data-am-modal-confirm>提交</span>
    </div>
  </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="image-popup">
 <div class="am-modal-dialog">
    <div class="am-modal-hd">
      <sapn class="am-popup-title">修改头像</sapn>
      <span data-am-modal-close
            class="am-close">&times;</span>
    </div>
    <div class="am-u-sm-12">
        <span>图片格式必须为：bmp, jpeg, jpg, jpeg; 不可大于2M</span>
        <div class="am-form-group am-form-file">
            <button type="button" class="am-btn am-btn-default am-btn-sm">
            <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
            <input type="file"  accept=".image,.gif,.jpg,.bmp" name="photofile" id="photofile"/>
        </div>
        <div class="am-fl" id="box" style="width:200px;height:200px;">
            <img src="" id="srcimage" style="max-width:100%;">
        </div>
        <div class="am-fl" style="width:180px;height:180px;margin-left:25px;padding:0px;overflow:hidden;" id="newcro">
        </div>
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" id="btn-modify-image" data-am-modal-confirm>提交</span>
    </div>
  </div>
</div>
</div>
{/block}

{block name="js"}
<script type="text/javascript" src="__STATIC__/js/cropper.min.js"></script>
<script type="text/javascript">
    $(function() {
      $('#btn-modify-username').on('click', function() {
        $('#name-prompt').modal({
            relatedTarget: this,
              onConfirm: function(e) {
                var newname = $('#new-newname').val();
                $.get("/user/modifyname",{"newname":newname},function(returndata,e){
                    if(returndata.code) {
                        location.reload();
                    } else {

                    }

                });
              },
              onCancel: function(e) {
                //alert('不想说!');
            }
        });
      });
    });

    var cropperOptions = {
            aspectRatio: 1 / 1,
            background:0,
            zoomable:0,
            preview: '#newcro',
            crop: function (data) {
            }
        };
    var $image = $('#srcimage');
    $image.cropper(cropperOptions);
    $('#photofile').on('change', function() {
        var file=this.files[0];//input
        var url;
        /*url = $('#srcimage').attr('src');
        if (url) {
              URL.revokeObjectURL(url); // Revoke the old one
        }*/
        url = URL.createObjectURL(file);
        $('#srcimage').attr('src',url);
        $image.cropper("replace",url);
    });
    $('#btn-modify-image').on('click',function(){
        var data = $image.cropper('getCroppedCanvas').toDataURL();
        $.post("/user/modifyimage",{"photo":data},function(returndata,e){
            if(returndata.code) {
                location.reload();
            } else {

            }
        });
    });
</script>
{/block}
